<template>
    <div>
        <el-form :inline="true" :model="queryParam" class="demo-form-inline">
            <el-form-item label="角色名称">
                <el-input clearable v-model="queryParam.name" placeholder="请输入查询的角色"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="toQuery">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="id"
                    label="主键"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="角色名称">
            </el-table-column>
            <el-table-column
                    prop="sn"
                    label="角色标识">
            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParam.currentPage"
                :page-sizes="[1, 2, 3, 4]"
                :page-size="queryParam.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

    </div>
</template>
<script>
    var axios = require("axios")
    export default {
        data(){
            return {
                queryParam: {
                    currentPage:1, //为什么要放在这里面？ 查询时，传递参数到后台，封装为了这个对象
                    pageSize:2
                },
                total:0,
                tableData: [],
                currentPage4: 4
            }
        },
        mounted() {
            this.toQuery();
        },
        methods:{
            toQuery() {
              //  console.log('queryParam====>'+JSON.stringify(this.queryParam));
                axios.post("/role/findpagebyparam",this.queryParam).then(res=>{
                    //先接收返回的查询结果  res.data.data
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                })
            },
            handleClick(row) {
                console.log(row);
            },
            //每页查询条件发生变化时，执行的方法
            handleSizeChange(val) {
                this.queryParam.pageSize = val;
                this.toQuery();
            },
            //页码发生变化时执行的方法
            handleCurrentChange(val) {
                this.queryParam.currentPage = val;
                this.toQuery();
            }
        }


    }

</script>